<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-10-15 09:55:02
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-10-26 11:31:07
 * @FilePath: \hd_ims_web\src\views\quality\qualitySelect\productQuality\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <el-form inline>
          <el-form-item label="客户代码">
            <el-autocomplete
              type="text"
              :fetch-suggestions="getAllCustomer"
              v-model="customerCode"
              :trigger-on-focus="false"
              value-key="itmCustwldm"
              @select="FillAttribute" />
          </el-form-item>
          <!-- <el-form-item label="物料代码">
            <el-input v-model="materialCode" placeholder="请输入物料代码" style="width: 200px" />
          </el-form-item> -->
          <el-form-item label="月份">
            <el-date-picker
              v-model="date"
              :type="'month'"
              :format="'yyyy-MM'"
              autocomplete="off"
              :clearable="false"
              @change="getList"></el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col v-loading="loading">
        <el-table v-if="!loading" highlight-current-row border stripe :data="productQualityList2" :header-cell-style="{ 'text-align': 'center' }">
          <el-table-column label="#" :show-overflow-tooltip="true" :width="tableW" align="center" prop="title" />
          <el-table-column v-for="(h, i) in headers" :label="h" min-width="50px" :show-overflow-tooltip="true" align="center" :prop="`value${i}`" />
        </el-table>
        <div>
          <div class="divleft"></div>
          <v-chart :options="option" class="" :autoresize="true" style="width: 100%; height: 500px"></v-chart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listProductQuality } from '@/api/quality/productQuality'
import { automaticStorage, PDACusWldmList, getItmMstrByPDACustwldm, getStatisticsWarehousing } from '@/api/repertory/PDA'
export default {
  name: 'ProductQuality',
  data() {
    return {
      loading: false,
      tableW: '120px',
      // 产品品质履历
      productQualityList: [],
      productQualityList2: [],
      date: this.$moment(),
      materialCode: '',
      customerCode: '',
      provider_list_data: [],
    }
  },
  created() {
    //请求所有客户代码
    PDACusWldmList().then((response) => {
      this.provider_list_data = response.data
    })
  },
  computed: {
    headers() {
      this.tableW = (31 - this.productQualityList.length) * 50 + 120 + 'px'
      return this.productQualityList.map((a) => {
        return a.rzmRq.split('-')[2] + '日'
      })
    },
    option() {
      return {
        dataset: {
          source: this.productQualityList,
        },
        grid: [
          { left: this.tableW, top: '7%', height: '36%', right: '1%' },
          { left: this.tableW, bottom: '7%', height: '36%', right: '1%' },
        ],
        xAxis: [
          {
            gridIndex: 0,
            type: 'time',
            interval: 3600 * 24 * 1000,
          },
          {
            gridIndex: 1,
            type: 'time',
            interval: 3600 * 24 * 1000,
          },
        ],
        title: [
          {
            text: '一\n次\n良\n率',
            left: '30px',
            top: '10%',
            textStyle: {
              fontSize: 20,
            },
          },
          {
            text: 'PPM',
            left: '10px',
            top: '60%',
            textStyle: {
              fontSize: 20,
            },
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            type: 'value',
            axisLabel: {
              formatter: '{value}%',
            },
            min: function (value) {
              return Math.max(value.min - 10, 0)
            },
          },
          {
            gridIndex: 1,
            type: 'value',
            axisLabel: {
              formatter: '{value}',
            },
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            let param = params[0]
            return `日期：${param.data.rzmRq} <br >PPM：${param.data.rzmPpm} <br >一次良率：${param.data.rzmYcll}%  `
          },
        },
        series: [
          {
            dimensions: [{ name: 'rzmRq', type: 'time' }, 'rzmYcll'],
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            showBackground: true,
            connectNulls: false,
            label: {
              show: true,
              position: 'top',
              formatter: '{@rzmYcll}%',
            },
          },
          {
            xAxisIndex: 1,
            yAxisIndex: 1,
            type: 'line',
            dimensions: [{ name: 'rzmRq', type: 'time' }, 'rzmPpm'],
            showBackground: true,
            connectNulls: false,
            label: {
              show: true,
              position: 'top',
              formatter: '{@rzmPpm}',
            },
          },
        ],
      }
    },
  },
  methods: {
    getList() {
      const year = this.$moment(this.date).format('yyyy')
      const month = this.$moment(this.date).format('MM')

      if (this.customerCode !== null && this.customerCode !== '') {
        this.loading = true
        listProductQuality(year, month, this.customerCode).then((res) => {
          this.loading = false
          this.productQualityList = res.data.map((o) => {
            o.rzmPpm = o.rzmPpm ? parseFloat(o.rzmPpm).toFixed(0) : ''
            o.rzmYcll = o.rzmYcll ? parseFloat(o.rzmYcll).toFixed(1) : ''
            return o
          })
          // 横纵转换
          let headers = [
            {
              prop: 'rzmBlsl',
              label: '不良数量',
            },
            {
              prop: 'rzmLpsl',
              label: '良品数量',
            },
            {
              prop: 'rzmSl',
              label: '生产总数',
            },
            {
              prop: 'rzmPpm',
              label: 'PPM',
            },
            {
              prop: 'rzmYcll',
              label: '一次良率',
            },
          ]
          this.productQualityList2 = headers.map((item) => {
            if (item.prop === 'rzmYcll') {
              return this.productQualityList.reduce((pre, cur, index) => {
                return Object.assign(
                  pre,
                  { ['value' + index]: cur[item.prop] ? cur[item.prop] + '%' : '' },
                  {
                    title: item.label,
                  }
                )
              }, 0)
            }
            return this.productQualityList.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), {
              title: item.label,
            })
          })

          this.loading = false
        })
      } else {
        this.$message.info('请输入物料代码')
      }
    },
    getAllCustomer(queryString, cb) {
      if (this.customerCode == null || this.customerCode == '') {
        return
      }
      let temp = []
      temp = this.provider_list_data
        .filter((i) => {
          return i.itmCustwldm.substr(-6).indexOf(this.customerCode) != -1
        })
        .slice(0, 30)
      cb(temp)
    },
    FillAttribute() {
      this.getList()
    },
  },
}
</script>
